<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>展示页</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <link rel="stylesheet" href="./css/swiper.min.css" />
    <style>
      html,
      body {
        position: relative;
        height: 100%;
      }
      body {
        margin: 0;
        padding: 0;
      }
      .swiper-container {
        width: 100%;
        height: 100%;
      }
      .swiper-slide {
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }
      .swiper-slide img {
        width: 100%;
        height: 100%;
      }
      .swiper-button-next,
      .swiper-button-prev {
        width: 25%;
        height: 100%;
      }
      .swiper-button-next:after,
      .swiper-button-prev:after {
        content: "";
        width: 100%;
      }
      .swiper-button-next,
      .swiper-button-prev {
        top: 0;
      }
      .swiper-button-next,
      .swiper-container-rtl .swiper-button-prev {
        right: 0;
      }
      .swiper-button-prev,
      .swiper-container-rtl .swiper-button-next {
        left: 0;
      }
    </style>
  </head>
  <body>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" cus_data = "1,通号"><img src="./images/a1.jpg" /></div>
        <div class="swiper-slide" cus_data = "1,通号"><img src="./images/a2.jpg" /></div>
        <div class="swiper-slide" cus_data = "2,车辆"><img src="./images/a3.jpg" /></div>
        <div class="swiper-slide" cus_data = "2,车辆"><img src="./images/a4.jpg" /></div>
        <div class="swiper-slide" cus_data = "2,车辆"><img src="./images/a5.jpg" /></div>
        <div class="swiper-slide" cus_data = "3,供电"><img src="./images/a6.jpg" /></div>
        <div class="swiper-slide" cus_data = "3,供电"><img src="./images/a7.jpg" /></div>
        <div class="swiper-slide" cus_data = "4,工务"><img src="./images/a8.jpg" /></div>
        <div class="swiper-slide" cus_data = "4,工务"><img src="./images/a9.jpg" /></div>
        <div class="swiper-slide" cus_data = "4,工务"><img src="./images/a10.jpg" /></div>
        <div class="swiper-slide" cus_data = "5,物后"><img src="./images/a11.jpg" /></div>
        <div class="swiper-slide" cus_data = "5,物后"><img src="./images/a12.jpg" /></div>

      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/swiper.min.js"></script>
    <script src="./js/socket.js"></script>
    <script src="./js/stomp.js"></script>
    <script>
      var swiper = new Swiper(".swiper-container", {
        parallax : true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        on: {
          slideChange: function () {
            // alert('改变了，activeIndex为'+this.activeIndex);
            // console.log(this.slides[this.activeIndex].getAttribute("cus_data"))
            let majorView = this.slides[this.activeIndex].getAttribute("cus_data");   //获取当前展示页的专业类别
            sendMajorView(majorView);                                                    //切换专业预案
          }
        }
      });

      var currentViewScene = 0;


      function sendMajorView(sceneNO) {
        if(sceneNO == currentViewScene){
            return;
        }
        currentViewScene = sceneNO;

        $.ajax({
          url: "/plan",
          type: 'post',
          contentType: 'application/x-www-form-urlencoded',
          data: {sceneNO:sceneNO},
          success: function (res) {
              console.log(res.message)
          },
        });
      }

      function switchCmdFunc(keyCmd) {
          switch (keyCmd) {
            case "0":
              fslideTo();
              break;
            case "1":
              fslidePrev();
              break;
            case "2":
              fslideNext();
              break;
          }
      }

      //步入指定页
      function fslideTo(pageNo,time,option) {
        swiper.slideTo(0, 1000, true);
      }

      //下一页
      function fslideNext() {
          swiper.slideNext();
      }

      //上一页
      function fslidePrev() {
          swiper.slidePrev();
      }

      function stompSocketConnect() {
        socketClient = new SockJS("/socket");

        stompClient = Stomp.over(socketClient);

        stompClient.connect({}, function(frame) {
          console.log('Connected: ' + frame);
          stompClient.subscribe('/keyCmd', function(response) {

            /**
             * 0 回到首页
             * 1 上一张
             * 2 下一张
             */
            var keyCMd = response.body;
            switchCmdFunc(keyCMd);
            // console.log(response);
          });

        }, errorCallback);
      }

      var retryTime = 0;

      function errorCallback() {
        retryTime++;
        if (retryTime > 5) {
          return;
        }
        setTimeout("stompSocketConnect()", 5000);
      }

      $(document).ready(function() {
        stompSocketConnect();
      });

    </script>
  </body>
</html>
